<template>
	<div style="width: 100%;">
		<div style="width: 100%;display: flex;">
			<div style="background: #E4ECF6;flex: 1;padding: 20px;border-radius: 8px;margin-right: 10px">
				<div style="font-size: 16px;font-weight: bold;margin-bottom: 10px;">废水</div>
				<div id="main1" style="width: 100%;height: 220px;margin: 0 auto;"></div>

				<div style="background: #fff;padding: 10px;border-radius: 8px;margin-top: 10px;"
					v-for="(item,index) in dataList1" :key="index">
					<div style="margin-bottom: 10px;">{{item.title}}</div>

					<div>
						<div style="background: #ECF4FE;padding: 10px;border-radius: 8px;margin-top: 10px;"
							v-for="(item2,index2) in item.detailList" :key="index2" @click="gotoPage(item2,'water')">
							<div class="displayFlexBet point">
								<span style="font-size: 10px;">{{index2+1}}、{{item2.title}}</span>
								<img src="@/assets/sIcon9.png" style="width: 20px;height: 20px;" v-if="item2.isError" />
								<img src="@/assets/sIcon6.png" style="width: 20px;height: 20px;" v-else />
							</div>

							<div v-if="item2.errorList && item2.errorList.length > 0"
								style="font-size: 12px;padding:10px 10px 5px;background: #fff;border-radius: 8px;margin-top: 10px;">
								<div v-for="(item3,index3) in item2.errorList" :key="index3" style="margin-bottom: 5px;color: #999;">
									{{index3+1}}、{{item3}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div style="background: #E4ECF6;flex: 1;padding: 20px;border-radius: 8px;margin-right: 10px">
				<div style="font-size: 16px;font-weight: bold;margin-bottom: 10px;">废气</div>
				<div id="main2" style="width: 100%;height: 220px;margin: 0 auto;"></div>

				<div style="background: #fff;padding: 10px;border-radius: 8px;margin-top: 10px;"
					v-for="(item,index) in dataList2" :key="index">
					<div style="margin-bottom: 10px;">{{item.title}}</div>

					<div>
						<div style="background: #ECF4FE;padding: 10px;border-radius: 8px;margin-top: 10px;"
							v-for="(item2,index2) in item.detailList" :key="index2" @click="gotoPage(item2,'gas')">
							<div class="displayFlexBet point">
								<span style="font-size: 10px;">{{index2+1}}、{{item2.title}}</span>
								<img src="@/assets/sIcon9.png" style="width: 20px;height: 20px;" v-if="item2.isError" />
								<img src="@/assets/sIcon6.png" style="width: 20px;height: 20px;" v-else />
							</div>
							<div v-if="item2.errorList && item2.errorList.length > 0"
								style="font-size: 12px;padding:10px 10px 5px;background: #fff;border-radius: 8px;margin-top: 10px;">
								<div v-for="(item3,index3) in item2.errorList" :key="index3" style="margin-bottom: 5px;color: #999;">
									{{index3+1}}、{{item3}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div style="background: #E4ECF6;flex: 1;padding: 20px;border-radius: 8px;margin-right: 10px">
				<div style="font-size: 16px;font-weight: bold;margin-bottom: 10px;">危废</div>
				<div id="main3" style="width: 100%;height: 220px;margin: 0 auto;"></div>

				<div style="background: #fff;padding: 10px;border-radius: 8px;margin-top: 10px;"
					v-for="(item,index) in dataList3" :key="index">
					<div style="margin-bottom: 10px;">{{item.title}}</div>

					<div>
						<div style="background: #ECF4FE;padding: 10px;border-radius: 8px;margin-top: 10px;"
							v-for="(item2,index2) in item.detailList" :key="index2" @click="gotoPage(item2,'waste')">
							<div class="displayFlexBet point">
								<span style="font-size: 10px;">{{index2+1}}、{{item2.title}}</span>
								<img src="@/assets/sIcon9.png" style="width: 20px;height: 20px;" v-if="item2.isError" />
								<img src="@/assets/sIcon6.png" style="width: 20px;height: 20px;" v-else />
							</div>
							<div v-if="item2.errorList && item2.errorList.length > 0"
								style="font-size: 12px;padding:10px 10px 5px;background: #fff;border-radius: 8px;margin-top: 10px;">
								<div v-for="(item3,index3) in item2.errorList" :key="index3" style="margin-bottom: 5px;color: #999;">
									{{index3+1}}、{{item3}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div style="flex: 1;"></div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	let that
	export default {
		data() {
			return {
				dataList1: [],
				dataList2: [],
				dataList3: [],
				dataList4: []
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.getWaterRiskList()
			that.getGasRiskList()
			that.getHwWasteRiskList()
		},

		methods: {

			gotoPage(item, type) {
				console.log(item)
				let routerUrl = "/filesManage/pdfManage"
				if (item.title.includes("巡检计划")) routerUrl = "/entScheduleAddPlan"
				if (item.title.includes("巡检任务")) routerUrl = "/entScheduleAddPlan"
				if (type == "water") {
					if (item.title.includes("在线监测")) routerUrl = "/wasteWater/home"
					if (item.title.includes("自行监测")) routerUrl = "/wasteWater/survey"
					if (item.title.includes("台账")) routerUrl = "/wasteWater/order"
					if (item.title == '废水运行制度') routerUrl = "/filesManage/pdfDet?categoryMainId=105&itemId=124"
					if (item.title == '废水标识设置') routerUrl = "/filesManage/pdfDet?categoryMainId=105&itemId=125"
					if (item.title == '废水化学品培训') routerUrl = "/filesManage/pdfDet?categoryMainId=105&itemId=127"
					if (item.title == '废水应急演练') routerUrl = "/filesManage/pdfDet?categoryMainId=105&itemId=130"
				}
				if (type == "gas") {
					if (item.title.includes("在线监测")) routerUrl = "/wasteGas/home"
					if (item.title.includes("自行监测")) routerUrl = "/wasteGas/survey"
					if (item.title.includes("台账")) routerUrl = "/wasteGas/order"
					if (item.title == '废气运行制度') routerUrl = "/filesManage/pdfDet?categoryMainId=106&itemId=131"
					if (item.title == '废气标识设置') routerUrl = "/filesManage/pdfDet?categoryMainId=106&itemId=132"
					if (item.title == '废气化学品培训') routerUrl = "/filesManage/pdfDet?categoryMainId=106&itemId=134"
					if (item.title == '废气应急演练') routerUrl = "/filesManage/pdfDet?categoryMainId=106&itemId=137"
				}
				if (routerUrl.includes("?categoryMainId")) {
					routerUrl = routerUrl + "&ticketId=" + this.$store.state.token
				} else {
					routerUrl = routerUrl + "?ticketId=" + this.$store.state.token
				}
				that.$router.push(routerUrl)
			},

			getHwWasteRiskList() {
				that.ajax({
					url: 'risk/getHwWasteRiskList',
					contentType: 'application/json',
					data: JSON.stringify({

					}),
					success: function(result) {
						that.dataList3 = result.data
						that.formChart("main3", result.data, "危废")
					},
				})
			},

			getGasRiskList() {
				that.ajax({
					url: 'risk/getGasRiskList',
					contentType: 'application/json',
					data: JSON.stringify({

					}),
					success: function(result) {
						that.dataList2 = result.data
						that.formChart("main2", result.data, "废气")
					},
				})
			},

			getWaterRiskList() {
				that.ajax({
					url: 'risk/getWaterRiskList',
					contentType: 'application/json',
					data: JSON.stringify({

					}),
					success: function(result) {
						that.dataList1 = result.data
						that.formChart("main1", result.data, "废水")
					},
				})
			},


			formChart(id, dataList, title) {
				let chartDom = document.getElementById(id);
				let myChart = echarts.init(chartDom);
				let option;
				let names = []
				let datas = []

				for (let item of dataList) {
					console.log(item)
					names.push({
						name: item.title,
						max: 5
					})
					datas.push(item.score)
				}

				//console.log(datas)

				option = {

					legend: {
						show: false
					},
					radar: {
						// shape: 'circle',
						indicator: names
					},
					series: [{
						name: '',
						type: 'radar',
						data: [{
							value: datas,
							name: 'name',
							label: {
								show: true,
								formatter: function(params) {
									return params.value;
								}
							}
						}]
					}]
				};

				option && myChart.setOption(option);
			},

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>